<template>
    <div class="heading-records">
        <!--   借阅记录搜索和新增    -->
        <el-row class="heading-records-search-and-new" >
            <!--    查询借阅记录功能  -->
            <el-col :span="16">
                <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
                    <el-select v-model="select" slot="prepend" placeholder="请选择">
                        <el-option label="借阅记录编号" value="record_id"></el-option>
                        <el-option label="借阅图书IBSN" value="record_book_ibsn"></el-option>
                        <el-option label="借阅图书的名称" value="record_book_title"></el-option>
                        <el-option label="借阅图书的作者" value="record_book_author"></el-option>
                        <el-option label="借阅图书的出版社" value="record_book_publisher"></el-option>
                        <el-option label="借阅图书的库存地址" value="record_book_address"></el-option>
                        <el-option label="借书人的借书证编号" value="record_library_card"></el-option>
                        <el-option label="借书人的姓名" value="record_student_name"></el-option>
                        <el-option label="借书人的手机号" value="record_student_phone"></el-option>
                        <el-option label="借阅状态" value="record_state"></el-option>
                        <el-option label="借出时间" value="record_create_time"></el-option>
                        <el-option label="是否被软删除" value="record_is_delete"></el-option>
                    </el-select>
                    <el-button slot="append" icon="el-icon-search" @click="searchRecord"></el-button>
                </el-input>
            </el-col>
            <!--    修改借阅记录显示内容  -->
            <el-col :span="4" :offset="2">
                <el-button type="primary" @click="overdueDisplay">{{overdue?"显示所有借阅":"仅显示逾期借阅"}}</el-button>
            </el-col>
        </el-row>
        <!--    借阅记录信息列表  -->
        <el-table :data="recordsData" style="width: 100%;margin-top: 10px">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="借阅记录编号">
                            <span>{{ props.row.record_id }}</span>
                        </el-form-item>
                        <el-form-item label="所借阅图书IBSN">
                            <span>{{ props.row.record_book_ibsn }}</span>
                        </el-form-item>
                        <el-form-item label="所借阅图书名称">
                            <span>{{ props.row.record_book_title }}</span>
                        </el-form-item>
                        <el-form-item label="所借阅图书作者">
                            <span>{{ props.row.record_book_author }}</span>
                        </el-form-item>
                        <el-form-item label="所借阅图书出版社">
                            <span>{{ props.row.record_book_publisher }}</span>
                        </el-form-item>
                        <el-form-item label="所借阅图书单价">
                            <span>{{ props.row.record_book_price }}</span>
                        </el-form-item>
                        <el-form-item label="所借阅图书的库存地址">
                            <span>{{ props.row.record_book_address }}</span>
                        </el-form-item>
                        <el-form-item label="借书人的借书证编号">
                            <span>{{ props.row.record_library_card }}</span>
                        </el-form-item>
                        <el-form-item label="借书人姓名">
                            <span>{{ props.row.record_student_name}}</span>
                        </el-form-item>
                        <el-form-item label="借书人手机号">
                            <span>{{ props.row.record_student_phone}}</span>
                        </el-form-item>
                        <el-form-item label="借阅记录创建时间">
                            <span>{{ props.row.record_create_time }}</span>
                        </el-form-item>
                        <el-form-item label="借阅到期时间">
                            <span>{{ props.row.record_expire_time}}</span>
                        </el-form-item>
                        <el-form-item label="借阅记录信息最后更新时间">
                            <span>{{ props.row.record_update_time }}</span>
                        </el-form-item>
                        <el-form-item label="是否归还">
                            <span>{{ props.row.record_return?"归还":"未归还" }}</span>
                        </el-form-item>
                        <el-form-item label="逻辑删除标识">
                            <span>{{ props.row.record_is_delete?"删除":"未删除" }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                    label="借阅记录编号"
                    prop="record_id">
            </el-table-column>
            <el-table-column
                    label="借阅图书名"
                    prop="record_book_title">
            </el-table-column>
            <el-table-column
                    label="借阅作者"
                    prop="record_book_author">
            </el-table-column>
            <el-table-column
                    label="出版社"
                    prop="record_book_publisher">
            </el-table-column>
            <el-table-column
                    label="借书人姓名"
                    prop="record_student_name">
            </el-table-column>
            <el-table-column
                    label="借书人手机号"
                    prop="record_student_phone">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="props">
                    <!--    修改借阅记录信息  -->
                    <el-button size="mini" @click="cardEdit(props.$index, props.row)">修改</el-button>
                    <el-dialog title="修改借阅记录信息" :visible.sync="changeRecordFormVisible" style="width: 60%;margin-left: 20%">
                        <el-form :model="changeRecordForm">
                            <el-form-item label="借阅记录信息的类别">
                                <el-select v-model="changeRecordForm.type" placeholder="请选择修改的借阅记录信息类别">
                                    <el-option label="图书单价" value="record_book_price"></el-option>
                                    <el-option label="借书人手机号" value="record_student_phone"></el-option>
                                    <el-option label="借阅状态" value="record_state"></el-option>
                                    <el-option label="逻辑删除标识" value="record_is_delete"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="修改的信息">
                                <el-input
                                        v-model="changeRecordForm.input"
                                        type="textarea"
                                        :rows="2"
                                        placeholder="请输入修改后的内容"
                                        autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="book-footer">
                            <el-button @click="changeRecordFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="submitChangeRecordForm">确 定</el-button>
                        </div>
                    </el-dialog>
                    <!--    删除借阅记录信息  -->
                    <el-button
                            size="mini"
                            type="danger"
                            @click="cardDelete(props.$index, props.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--    借阅记录列表切换  -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="defaultPage"
                :page-sizes="pages"
                :page-size="pages[pagesIndex]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalNumber">
        </el-pagination>
    </div>
</template>

<script>
    export default {        
        name: "HeadingRecords",
        data(){
            return {
                // 借阅记录列表
                recordsData: [],
                // 查询借阅记录
                input:'',
                select:'',
                // 显示逾期
                overdue: false,
                // 修改借阅记录
                changeRecordFormVisible:false,
                changeRecordForm:{
                    id:'',
                    type:'',
                    input:''
                },
                // 借阅记录信息列表分页显示
                defaultPage: 1,
                totalNumber:5,
                pages:[5,10,15,20],
                pagesIndex: 1,
            };
        },
        mounted() {
            this.getRecordsList()
        },
        methods:{
            // 页面加载时获取数据库中借阅记录列表
            getRecordsList(){
                console.log('发送借阅记录信息获取请求！')
                this.$axios.get('/records/list',{
                    params:{
                        role:this.$store.state.user.user_role
                    }
                }).then(res=>{
                    if(res.data.code === 200){
                        this.recordsData = res.data.msg
                        this.totalNumber = res.data.msg.length
                        // console.log(res.data);
                    }else{
                        this.$message({
                            message: '服务器开小差了,请刷新页面重试~~~',
                            type: 'warning'
                        })
                    }
                })
            },
            // 仅显示逾期借阅
            overdueDisplay(){
                if(this.overdue) {
                    this.getRecordsList()
                    this.$message({
                        message: '当前显示所有借阅记录~~~',
                        type: 'success'
                    })
                    this.overdue = !this.overdue
                }else{
                    const time = Date.now()
                    console.log(time);
                    this.$axios.get('/records/search',{
                        params:{
                            role:this.$store.state.user.user_role,
                            type:'time',
                            input: time
                        }
                    }).then(res => {
                        if(res.data.code === 200){
                            this.recordsData = res.data.msg
                            this.totalNumber = res.data.msg.length
                            this.$message({
                                message: '当前仅显示逾期借阅记录~~~',
                                type: 'success'
                            })
                        }else{
                            this.$message({
                                message: '服务器开小差了,请刷新页面重试~~~',
                                type: 'warning'
                            })
                        }
                    })
                    this.overdue = !this.overdue
                }
            },
            // 搜索借阅记录信息
            searchRecord(){
                console.log(this.select,this.input)
                this.$axios.get('/records/search',{
                    params: {
                        role:this.$store.state.user.user_role,
                        type:this.select,
                        input:this.input
                    }
                }).then(res=>{
                    if(res.data.code === 200){
                        this.$message({
                            message: '查询借阅记录信息成功！',
                            type: 'success'
                        })
                    }else{
                        this.$message({
                            message: '请确认借阅记录信息完整性与正确性后重试！',
                            type: 'warning'
                        })
                    }
                    this.recordsData = res.data.msg
                    // console.log(res.data)
                })
            },
            // 修改借阅记录
            cardEdit(index, row) {
                console.log(index, row);
                this.changeRecordForm.id = row.record_id
                this.changeRecordFormVisible = true
            },
            submitChangeRecordForm(){
                // 发送post请求,修改借阅记录信息
                console.log('发送修改借阅记录信息请求');
                this.changeRecordFormVisible = false
                this.$axios.post('/records/update',{
                    role:this.$store.state.user.user_role,
                    id:this.changeRecordForm.id,
                    type:this.changeRecordForm.type,
                    input:this.changeRecordForm.input
                }).then(res => {
                    // 重新获取借阅记录列表
                    this.getRecordsList()
                    this.changeRecordForm.card_id = ''
                    this.changeRecordForm.type = ''
                    this.changeRecordForm.input = ''
                    switch (res.data.code){
                        case 200 :{
                            this.$message({
                                message: '修改借阅记录信息成功！',
                                type: 'success'
                            })
                            break
                        }
                        case 401:{
                            this.$message({
                                message: '未登录!',
                                type: 'warning'
                            })
                            break;
                        }
                        default:{
                            this.$message({
                                message: '服务器开小差了,请刷新页面后重试...',
                                type: 'warning'
                            })
                        }
                    }
                })
            },
            // 删除借阅记录
            cardDelete(index, row) {
                console.log(index, row);
                // 发送post请求
                console.log('发送删除借阅记录信息请求')
                this.$axios.post('/records/delete',{
                    role:this.$store.state.user.user_role,
                    id:row.record_id
                }).then(res => {
                    switch (res.data.code) {
                        case 200:{
                            this.$message({
                                message: '删除成功!',
                                type: 'success'
                            })
                            // 重新获取图书列表
                            this.getRecordsList()
                            break;
                        }
                        case 403: {
                            this.$message({
                                message: '权限不足!请登录...',
                                type: 'warning'
                            })
                            break;
                        }
                        default:{
                            this.$message({
                                message: '服务器开小差了,请刷新页面后重试...',
                                type: 'warning'
                            })
                        }
                    }
                })
            },
            // 切换每页显示的数量
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            // 切换页面
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style scoped>
    .heading-records{
        margin: 10px;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>